<!--
 * @Author: early-autumn
 * @Date: 2020-05-09 16:43:24
 * @LastEditors: early-autumn
 * @LastEditTime: 2020-05-16 17:48:44
 -->
<template>
  <el-tabs v-model="currentTab">
    <el-tab-pane
      v-for="item in tabOptions"
      :key="item.name"
      :label="item.label"
      :name="item.name"
      :lazy="true"
    >
      <component :is="item.name" :patient="patient" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: 'ChargeRecordPane',
  components: {
    BillingRecord: () => import('./BillingRecord'),
    PaymentRecord: () => import('./PaymentRecord'),
    ChargeArrear: () => import('./ChargeArrear'),
  },
  props: {
    patient: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      tabOptions: [
        {
          label: '账单记录',
          name: 'BillingRecord',
        },
        {
          label: '支付记录',
          name: 'PaymentRecord',
        },
        {
          label: '收取欠款',
          name: 'ChargeArrear',
        },
      ],
      currentTab: 'BillingRecord',
    }
  },
}
</script>

<style></style>
